<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>index</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <div v-for="item in list">
                <span>{{ item.id}}</span>--
                <span>{{ item.title}}</span>--
                <span>{{ item.content}}</span>--
                <span>{{ item.create_time}}</span>
                <hr>
            </div>
        </div>
        <div>
            <input type="text" v-model="title" />
        </div>
        <div>
            <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
        </div>
        <div>
            <button @click="submit">提交</button>
        </div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    list: [],
                    title: "",
                    content: "",
                };
            },
            created(){
                this.loadMessage()
            },
            methods: {
                loadMessage() {
                    axios
                        .get("/message/list",)
                        .then(function (response) {
                            console.log(response);
                            this.list = response.data
                        }.bind(this));
                },
                submit() {
                    // console.log(this.title, this.content);
                    axios
                        .post("http://localhost:1984/message/add", {
                            title: this.title,
                            content: this.content,
                        })
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    this.loadMessage()
                },
            },
        }).mount("#app");
    </script>
</body>

</html>